import React, { useEffect, useState } from 'react'
import { Carousel } from 'antd';
const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
};
export default function Banner() {
    let [data, setData] = useState([
        {
            id: "1",
            src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657270352&t=99c875bf6b5196443bfd06a7228cad57"
        },
        {
            id: "2",
            src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210Q6133S9A22-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657270352&t=4729cafe9369e08ef36943e9c6acfd85"
        },
        {
            id: "3",
            src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0G020114924%2F200G0114924-15-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657270352&t=43bed73a8a917d4f7195bdf4ad97e647"
        },
        {
            id: "4",
            src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F0F420110430%2F200F4110430-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657270352&t=fa7550608cef84454d5743457537c249"
        },
        {
            id: "5",
            src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1114%2F0I120152936%2F200I1152936-5-1200.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657270352&t=6a4c5e84942e8cde14b9e057dbe41d46"
        },
    ])
    useEffect(() => {

    }, [])

    return (
        <div>
            <Carousel autoplay={true} style={{
                backgroundColor: "red"
            }}>
                {data.map(item => (
                    <div style={contentStyle} key={item.id}>
                        <img style={{
                            width: '100%',
                            height: "100%"
                        }} src={item.src} alt="" />
                    </div>
                ))}
            </Carousel>
        </div>
    )
}
